<template>
  <div>
    <p-table
      size="middle"
      bordered
      rowKey="id"
      :pagination="false"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
    >
      <template slot="replace" slot-scope="text, record">
        <p-button type="primary" @click="replace(record)">替换</p-button>
      </template>
    </p-table>
    <replace-modal ref="modalForm" @ok="getData" />
  </div>
</template>

<script>
import { postAction } from "@/api/manage";
import ReplaceModal from "../modules/ReplaceModal";

export default {
  components: {
    ReplaceModal,
  },
  props: {
    processBillNo: String,
  },
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "rowIndex",
          width: 50,
          align: "center",
          customRender(text, record, index) {
            return index + 1;
          },
        },
        {
          title: "线体",
          align: "center",
          dataIndex: "linename",
        },
        {
          title: "工站",
          align: "center",
          dataIndex: "workstationName",
        },
        {
          title: "PN/SN",
          align: "center",
          dataIndex: "pnsn",
        },
        {
          title: "产品编码",
          align: "center",
          dataIndex: "productCode",
        },
        // {
        //   title: "产品数量",
        //   align: "center",
        //   dataIndex: "productQty",
        // },
        {
          title: "关键物料描述",
          align: "center",
          dataIndex: "meterialName",
        },
        {
          title: "关键物料条码",
          align: "center",
          dataIndex: "meterialBarCode",
        },
        {
          title: "绑定数量",
          align: "center",
          dataIndex: "bindQty",
        },
        {
          title: "操作人员",
          align: "center",
          dataIndex: "operateName",
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "",
          width: 60,
          fixed: "right",
          scopedSlots: {
            customRender: "replace",
          },
        },
      ],
      dataSource: [],
      loading: false,
    };
  },
  watch: {
    processBillNo() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      // const { processBillNo } = this;
      // if (!processBillNo) {
      //   this.dataSource = [];
      //   return;
      // }
      this.loading = true;
      let params = {
        barCode: "",
        keyword: "",
        limit: 10,
        pageNo: 1,
        productCode: "",
      };
      postAction(
        "/mes-manufacture/mfBindingRecord/getBindingRecord",
        params
      ).then((res) => {
        this.loading = false;
        this.dataSource = res.data.records || [];
      });
    },
    replace(item) {
      const { modalForm } = this.$refs;
      modalForm.add(item);
      if (modalForm.getRuleCodeValue) {
        modalForm.getRuleCodeValue();
      }
      modalForm.title = "替换";
      modalForm.disableSubmit = false;
    },
  },
};
</script>
